﻿@using System.Diagnostics
@model WebApp.Data.tbl_block
@{
    ViewBag.Title = "Detail";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
    Block Detail</h2>
<style type="text/css">
    .main-tb
    {
        width: 100%;
    }
    
    .left-col
    {
        width: 50%;
        padding-left: 25px;
    }
    
    .right-col
    {
        width: 50%;
        vertical-align: top;
        padding: 45px;
    }
    
    .img-warpper
    {
    }
    
    #img-border
    {
        width: 250px;
        height: 250px;
        border: solid 2px #778899;
        margin-bottom: 10px;
    }
</style>
<div>
    <table class="main-tb">
        <tr>
            <td class="left-col">
                <fieldset>
                    <legend>@Model.block_code</legend>
                    <div class="control-group">
                        <label class="control-label" for="input01">
                            ซีรีย์</label>
                        <div class="controls">
                            <b>@ViewBag.Serie</b>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="input01">
                            ขนาด</label>
                        <div class="controls">
                            <b>@Model.block_wide x @Model.block_long x @Model.block_height</b>
                            <p class="help-block">
                                ขนาดแสดงในรูปแบบ กว้าง x ยาว x สูง (เซนติเมตร)</p>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="input01">
                            วันที่สร้าง</label>
                        <div class="controls">
                            <b>
                                @{
                                    if (Model.block_create_date.HasValue)
                                    {
                                    @Model.block_create_date.Value.ToLongDateString()
                                    }
                                }
                            </b>&nbsp;โดย @ViewBag.CreatedBy
                            <p class="help-block">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="input01">
                            วันที่ปรับปรุงล่าสุด</label>
                        <div class="controls">
                            <b>
                                @{
                                    if (Model.block_update_date.HasValue)
                                    {
                                    @Model.block_update_date.Value.ToLongDateString()
                                    }
                                }
                            </b>&nbsp;โดย @ViewBag.UpdatedBy
                            <p class="help-block">
                        </div>
                    </div>
                </fieldset>
                <p>
                    @Html.ActionLink("Edit", "Edit", new { id = Model.block_id }) |
                    @Html.ActionLink("Back to List", "Index")
                </p>
            </td>
            <td class="right-col">
                <div class="img-warpper">
                    <div id="img-border">
                        
                    </div>
                    <div class="cmd-warpper">
                        <input type="button" class="btn btn-primary" id="btnEditImg" value="แก้ไข" style="display: none;" />
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>
<br />
<div class="control-group">
    <table id="list">
    </table>
    <div id="pager">
    </div>
</div>
<form style="display: none;" action='/Block/Designer' method="post" id="form_alter">
    <input type="hidden" id="form_param1" name="id" value="" />
    <input type="hidden" id="form_param2" name="backurl" value="" />
</form>

<input type="hidden" id="hdOutline" value='@Model.block_outline_' />

<script src="@Url.Content("~/Scripts/tools/js/raphael-min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/tools/blockdisplay.js")" type="text/javascript"></script>
<script type="text/javascript">

    var blockId = "@Model.block_id";

    $(document).ready(function () {

        $("#btnEditImg").click(function () {

            $("#form_param1").attr("value", blockId);
            $("#form_param2").attr("value", "");
            $("#form_alter").submit();

        });

        initialGrid();
        
        var params = {
            blockId: blockId
        };
        $('#list').setGridParam({ url: '/Block/ColorList', postData: params }).trigger('reloadGrid');
        
        DisplayBlock($('#img-border')[0], $("#hdOutline").val(), 250, 250);
        
    });

    function initialGrid() {

        var updateDialog = {
            url: '/Material/Update'
            , closeAfterAdd: true
            , closeAfterEdit: true
            , recreateForm: true
            , ajaxGridOptions: { traditional: true }
            , beforeShowForm: function (form) {
                // "editmodlist"
                var grid = $('#list');
                var dlgDiv = $("#editmod" + grid[0].id);
                var dlgWidth = dlgDiv.width();
                var dlgHeight = dlgDiv.height();

                if (dlgDiv[0] == undefined) {
                    dlgDiv = $("#delmod" + grid[0].id);
                    dlgDiv[0].style.width = "350px";
                    dlgWidth = dlgDiv.width();
                }

                dlgDiv[0].style.left = Math.round(($(window).width() - dlgWidth) / 2) + "px";
                
            }
            , afterShowForm: function (formId) {
                $('#block_color').ColorPicker();
            }
            , afterclickPgButtons: function (whichbutton, formid, rowid) {

            }
            , modal: true

            , onclickSubmit: function (params) {
                var ajaxData = {};

                var list = $("#list");
                var selectedRow = list.getGridParam("selrow");
                var rowData = list.getRowData(selectedRow);
                ajaxData = { supplier_id: rowData.supplier_id };

                return ajaxData;
            }
            , width: "550"
        };

        var delDialog = {
            url: '/Block/Delete'
            , closeAfterAdd: true
            , closeAfterEdit: true
            , recreateForm: true
            , beforeShowForm: function (form) {
                // "editmodlist"
                var grid = $('#list');
                var dlgDiv = $("#delmod" + grid[0].id);
                var dlgWidth = dlgDiv.width();

                dlgDiv[0].style.left = Math.round(($(window).width() - dlgWidth) / 2) + "px";
            }
            , modal: true
            , onclickSubmit: function (params) {
                var ajaxData = {};

                var list = $("#list");
                var selectedRow = list.getGridParam("selarrrow");
                ajaxData = { ids: selectedRow };

                return ajaxData;
            }
            , ajaxOptions: { traditional: true }
            , width: "350"
        };

        $.jgrid.nav.addtext = "";
        $.jgrid.nav.edittext = "";
        $.jgrid.nav.deltext = "";
        $.jgrid.edit.addCaption = "เพิ่มรายการอิฐบล็อก";
        $.jgrid.edit.editCaption = "แก้ไขรายการอิฐบล็อก";
        $.jgrid.del.caption = "ลบรายการ";
        $.jgrid.del.msg = "ต้องการลบรายการนี้หรือไม่?";

        $("#list").jqGrid({
            datatype: 'json',
            mtype: 'POST',
            colNames: ['id', 'ชื่อ', 'สี', 'ราคาขาย','ต้นทุน', 'วันที่ปรับปรุง'],
            colModel: [
                { name: 'area_type_step_id', index: 'area_type_step_id', width: 40, align: 'left', key: true, editable: false, hidden: true },
                { name:"material_name", index:"material_name", width:280, key: false, editable: true, align: 'left'},
                { name:"block_color", index:"block_color", width:50, key: false, editable: true, align: 'center'},
                { name:"sale_price", index:"sale_price", width:100, key: false, editable: true, align: 'right'},
                { name: "purchase_price", index: "purchase_price", width: 100, key: false, editable: true, align: 'right'},
                { name: "created_date", index: "created_date", width: 150, key: false, align: 'left', editable: true }
            ],
            pager: $('#pager'),
            rowNum: 10,
            width: 890,
            height: 200,
            rownumbers: true,
            multiselect: true,
            sortname: 'material_create_date',
            sortorder: "desc",
            gridview: true,
            viewrecords: true,
            shrinkToFit: false,
            ajaxGridOptions: { cache: false },
            caption: 'รายการสีอิฐบล็อก',
            autowidth: false,
            subGrid: true,
            ondblClickRow: function (rowid, iRow, iCol, e) {
                $("#form_param1").attr("value", rowid);
                $("#form_param2").attr("value", "");
                $("#form_alter").submit();
            },
            subGridRowExpanded: function(subgridId, mainRowId) { // mainRowId คือ ID ของ Material
                
                var subgridTableId; // id ของ Grid ที่แสดงรายการขั้นตอนการดำเนินงาน
                var subgridPagerId; // id ของ Pager ของ Grid ที่แสดงขั้นตอนการดำเนินงาน
                subgridTableId = subgridId+"_t";
                subgridPagerId = "p_" + subgridTableId;
                jQuery("#"+subgridId).html("<table id='"+subgridTableId+"' class='scroll'></table><div id='" + subgridPagerId + "' class='scroll'></div>");

                jQuery("#"+subgridTableId).jqGrid({
                    url:'/Block/PriceList',
                    postData: {matid: mainRowId},
                    datatype: "json",
                    mtype: 'POST',
                    colNames: ['id', 'ราคาขาย','ต้นทุน', 'วันที่ปรับปรุง'],
                    colModel: [
                        { name: 'area_type_step_id', index: 'area_type_step_id', width: 40, align: 'left', key: true, editable: false, hidden: true },
                        { name:"sale_price", index:"sale_price", width:50, key: false, editable: false, align: 'right'},
                        { name: "purchase_price", index: "purchase_price", width: 50, key: false, editable: false, align: 'right'},
                        { name: "created_date", index: "created_date", width: 50, key: false, align: 'left', editable: true }
                    ],
                    height: '100%',
                    rowNum: 20,
                    width: 400,
                    viewrecords: true,
                    rownumbers: true,
                    sortname: 'created_date',
                    sortorder: "asc",
                    caption: 'ประวัติการปรับราคา',
                    pager: subgridPagerId
                    
                }).navGrid('#' + subgridPagerId,
                    {
                        edit: false, add: false, del: false, search: false, refresh: true
                    }
                );

            },
        }).navGrid('#pager',
            {
                edit: true, add: true, del: true, search: false, refresh: true
            },
            updateDialog,
            updateDialog,
            delDialog
        );

    }

</script>
